<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <meta name="author" content="Oliver" />
    <meta name="Copyright" content="Oliver" />
    <meta name="description" content="个人主页" />
    <meta content="" name="keywords" />
    <title>Personify Personal/VCard Website Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800|Playfair+Display:,300, 400, 700" rel="stylesheet">

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/mediaelementplayer.min.css">

    <link rel="stylesheet" href="fonts/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css">


    <!-- Theme Style -->
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>

    <div class="site-wrap">

      <a href="#" class="offcanvas-toggle js-offcanvas-toggle">Menu</a>
      <div class="offcanvas_menu" id="offcanvas_menu">
        <ul class="mb-5">
          <li class="active"><a href="index.html">Bio</a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="resume.html">Resume</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>

        <ul class="social">
          <li><a href="#" class="fa fa-twitter"></a></li>
          <li><a href="#" class="fa fa-facebook"></a></li>
          <li><a href="#" class="fa fa-instagram"></a></li>
        </ul>

</br><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->

      </div>

      <aside style="background-image: url(img/profile_big.jpg);"></aside>
      <main>
        <h1 class="mb-0">Hi, I'm Oliver</h1>
        <div class="mb-5">
        <p class="lead mb-3">咸鱼 &amp; 业余电子爱好者</p>
        <p>众说周知我是个男的，但是我喜欢女的！</p>
        <p>唱跳rap篮球我都不会，music也不会，所以就给各位大佬背首诗吧！</p>
        <p>浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。

忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。

沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。

我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。</p>
        </div>

        <p>
          <a href="#" class="mr-2 mb-2">Twitter</a>
          <a href="#" class="mr-2 mb-2">Facebook</a>
          <a href="#" class="mr-2 mb-2">Instagram</a>
       </p>
        <!-- <h2 class="mb-4 mt-5">Services</h2>
        <div class="row">
          <div class="col-md-6 col-lg-6 mb-4">
            <div class="media custom-media  d-block">
              <div class="icon mr-3"><span class="ion-android-cart"></span></div>
              <div class="media-body">
                <h3 class="mt-0"><a href="#">eCommerce Websites</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed obcaecati totam.</p>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-6 mb-4">
            <div class="media custom-media  d-block">
              <div class="icon mr-3"><span class="ion-bonfire"></span></div>
              <div class="media-body">
                <h3 class="mt-0"><a href="#">Branding Identity </a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed obcaecati, totam.</p>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-6 mb-4">
            <div class="media custom-media  d-block">
              <div class="icon mr-3"><span class="ion-videocamera"></span></div>
              <div class="media-body">
                <h3 class="mt-0"><a href="#">Video Editing</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed obcaecati totam.</p>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-6 mb-4">
            <div class="media custom-media  d-block">
              <div class="icon mr-3"><span class="ion-cube"></span></div>
              <div class="media-body">
                <h3 class="mt-0"><a href="#">Web Applications </a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed obcaecati, totam.</p>
              </div>
            </div>
          </div> -->
        </div>

      </main>
    </div>

    <!-- loader -->
    <div id="loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#f4b214"/></svg></div>

    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/jquery.waypoints.min.js"></script>
    <script src="js/jquery.countdown.min.js"></script>
    <script src="js/main.js"></script>

  </body>
</html>
